@import '../global/variables.css';

/**
 * @name Form
*/

:global(.ring-form) {
  color: var(--ring-text-color);

  font-family: var(--ring-font-family);
  font-size: var(--ring-font-size);
}

:global(.ring-form_white-bg) {
  background: var(--ring-content-background-color);
}

:global(.ring-form_border) {
  border: 1px solid var(--ring-disabled-color);
  border-radius: 2px;
}

:global(.ring-form_rows .ring-form__label) {
  float: none;

  max-width: none;
}

:global(.ring-form_rows.ring-form__control) {
  width: calc(42 * var(--ring-unit));
  margin-left: 0;
}

:global(.ring-form__wrap) {
  margin-bottom: 0;
  padding: calc(3 * var(--ring-unit)) calc(4 * var(--ring-unit)) 0;
}

:global(.ring-form__header) {
  min-height: 13px;
  padding-bottom: calc(2 * var(--ring-unit));
}

:global(.ring-form__control__description) {
  display: block;

  max-width: 900px;
  padding-top: calc(var(--ring-unit) / 2);

  color: var(--ring-secondary-color);

  font-size: var(--ring-font-size-smaller);
  line-height: 16px !important;
}

:global(.ring-form__title-img) {
  float: left;

  height: calc(4 * var(--ring-unit));

  border: 0;
}

:global(.ring-form__title) {
  display: block;

  margin-bottom: calc(var(--ring-unit));

  font-weight: var(--ring-font-weight-bold);
}

:global(.ring-form__main-title) {
  color: var(--ring-text-color);

  font-family: var(--ring-font-family);
  font-size: 19px;
}

:global(.ring-form__title_separated) {
  margin: calc(var(--ring-unit) * 3) 0;
}

:global(.ring-form__group) {
  position: relative;

  margin: calc(var(--ring-unit) * 2) 0;
}

:global(.ring-form__group:first-child) {
  margin-top: 0;
}

:global(.ring-form__group::after) {
  display: block;
  clear: both;

  content: '';
}

:global(.ring-form__group_united) {
  padding-bottom: 0;
}

:global(.ring-form__group .ring_form__group) {
  padding-top: 0;
  padding-left: calc(var(--ring-unit) * 2);
}

:global(.ring-form__group .ring_form__group .ring-form__control) {
  margin-left: calc(18 * var(--ring-unit));
}

:global(.ring-form__group_nested) {
  padding-top: 0;
  padding-left: calc(var(--ring-unit) * 2);
}

:global(.ring-form__group_nested .ring-form__control) {
  margin-left: calc(18 * var(--ring-unit));
}

:global(.ring-form__label) {
  position: relative;
  top: 0;

  display: inline-block;
  float: left;

  max-width: calc(18 * var(--ring-unit));
  padding-top: calc(var(--ring-unit) / 2);

  vertical-align: top;

  line-height: calc(2 * var(--ring-unit));
}

:global(.ring-form__label .ring-radio-btn__label) {
  top: -2px;
}

:global(.ring-form__label .ring-checkbox__label) {
  top: -2px;
}

/* End of special fix */

:global(.ring-form__label_title) {
  font-weight: var(--ring-font-weight-bold);
}

:global(.ring-form__control) {
  position: relative;

  width: auto;
  min-height: calc(3 * var(--ring-unit));
  margin-left: calc(20 * var(--ring-unit));

  vertical-align: top;

  line-height: calc(3 * var(--ring-unit));
}

:global(.ring-form__control_text::after) {
  display: inline-block;

  height: calc(var(--ring-unit) * 3);

  content: '';
  vertical-align: middle;
}

/* Temporary solution, proper grid is necessary */
:global(.ring-form__control_secondary) {
  position: absolute;
  top: var(--ring-unit);
  left: calc(27 * var(--ring-unit));
}

:global(.ring-form__control_on) {
  color: var(--ring-success-color);
}

:global(.ring-form__control_off) {
  color: var(--ring-secondary-color);
}

:global(.ring-form__control-link) {
  position: relative;
  top: 6px;
}

:global(.ring-form__control_small) {
  margin-left: calc(16 * var(--ring-unit)) !important;
}

:global(.ring-form__info) {
  width: calc(85 * var(--ring-unit));
  margin-bottom: calc(-1 * var(--ring-unit) + 2px);
  margin-left: calc(20 * var(--ring-unit));

  line-height: 20px;
}

:global(.ring-form__control__part) {
  margin-right: var(--ring-unit);
}

/* Form for key-value data

 You can add "ring-form\__group_short" to "ring-form\__group" to make the left column shorter

 Markup:
 <form class="ring-form">
  <div class="ring-form__group ring-form__group_short">
    <label class="ring-form__label">
      <input class="ring-radio-btn" type="radio" name="find-type" id="breakout-checkbox-1"/>
      <label class="ring-radio-btn__label" for="breakout-checkbox-1"></label>
    </label>
    <div class="ring-form__control">
      <label for="breakout-checkbox-1">Users with same emails and similar names</label>
    </div>
  </div>
  <div class="ring-form__group ring-form__group_short">
    <label class="ring-form__label">
      <input class="ring-radio-btn" type="radio" name="find-type" id="breakout-checkbox-2"/>
      <label class="ring-radio-btn__label" for="breakout-checkbox-2"></label>
    </label>
    <div class="ring-form__control">
      <label for="breakout-checkbox-2">Users with same emails</label>
    </div>
  </div>
  <div class="ring-form__group ring-form__group_short">
    <label class="ring-form__label">
        <input id="short-checkbox-1" class="ring-checkbox" type="checkbox" name="example">
        <label class="ring-checkbox__label" for="short-checkbox-1"></label>
    </label>
    <div class="ring-form__control">
      <label class="ring-label" for="breakout-checkbox-3">Users having at least something in common</label>
    </div>
  </div>
  <div class="ring-form__footer">
    <button class="ring-button ring-button_blue">Save</button>
    <button class="ring-button">Cancel</button>
  </div>
 </form> */

:global(.ring-form__group_short) {
  padding-top: calc(var(--ring-unit) / 2);
  padding-bottom: 0;
}

:global(.ring-form__group_short:last-child) {
  padding-bottom: var(--ring-unit);
}

:global(.ring-form__group_short.ring-form__control) {
  margin-left: calc(var(--ring-unit) * 3);
}

:global(.ring-form_small .ring-form__label) {
  max-width: calc(12 * var(--ring-unit));
}

:global(.ring-form_small .ring-form__control) {
  margin-left: calc(16 * var(--ring-unit));
}
